<template>
	<view class="detail">
		<tn-nav-bar fixed :beforeBack="beforeBack" backTitle=" "></tn-nav-bar>
		<view class="px-2">
			<view class="mb-3">
				<tn-list-view :card="true" :arrow="true" :arrowRight="true" :radius="true">
					<tn-list-cell :unlined="true" :fontSize="30" :radius="true" :arrow="true" @click="goToCategory">
						<view class="account-item-left d-flex a-center">
							<view class="account-icon d-flex j-center a-center">
								<image :src="getImg()" mode=""></image>
							</view>
							<view class="account-title">{{ accountData.eventType }}</view>
						</view>
					</tn-list-cell>
				</tn-list-view>
			</view>

			<view class="mb-3">
				<tn-list-view :card="true" :arrow="false" :arrowRight="true" :radius="true">
					<tn-list-cell :unlined="true" :fontSize="30" :radius="true" :arrow="false">
						<view class="account-item-left d-flex j-sb a-center">
							<view class="account-title">金额</view>
							<view class="account-input px-2">
								<tn-input v-model="accountData.amount" inputAlign="right" type="digit" placeholder="金额" :height="60"
									@blur="amountInput" />
							</view>
						</view>
					</tn-list-cell>
					<tn-list-cell :unlined="true" :fontSize="30" :radius="true" :arrow="true">
						<view class="account-item-left d-flex j-sb a-center">
							<view class="account-title">账单日期</view>
							<view class="pr-3" @click="showCalendar = true">
								<text>{{ accountData.eventTime || '空'}}</text>
							</view>
						</view>
					</tn-list-cell>
					<tn-list-cell :unlined="true" :fontSize="30" :radius="true" :arrow="false">
						<view class="account-item-left d-flex j-sb a-center">
							<view class="account-title">账单属性</view>
							<view class="account-text d-flex">
								<block v-for="(item, index) in subsectionList">
									<view class="in-out flex-1 font-26" :class="{ active: accountData.inOut == index }">{{ item }}</view>
								</block>
							</view>
						</view>
					</tn-list-cell>
				</tn-list-view>
			</view>
			<view class="mb-5">
				<tn-list-view :card="true" :arrow="true" :arrowRight="true" :radius="true">
					<tn-list-cell :unlined="true" :fontSize="30" :radius="true" :arrow="false">
						<view>
							<view>备注：</view>
							<tn-input v-model="accountData.remark" type="textarea" placeholder="备注" :height="180" />
							<view class="account-date d-flex j-sb a-center">
								<text>记录日期</text>
								<view class="d-flex">
									<text>{{ date }}</text>
									<text class="ml-32">{{ time }}</text>
								</view>
							</view>
						</view>
					</tn-list-cell>
				</tn-list-view>
			</view>
			<view class="mb-3">
				<tn-button @click="handleEdit" backgroundColor="#e74954" fontColor="#fff" width="100%" height="93rpx"
					:fontSize="32">保存</tn-button>
			</view>
			<view class="mb-3">
				<tn-button backgroundColor="#fff" fontColor="#919AAB" width="100%" height="93rpx" :fontSize="32"
					@click="handleDelete">删除</tn-button>
			</view>
		</view>
		<tn-calendar v-model="showCalendar" mode="date" btnColor="#e74954" activeBgColor="#e74954" :closeBtn="true"
			maxDate="2100-12-31" :borderRadius="40" toolTips=" " @change="changeCalendar"></tn-calendar>
	</view>
</template>

<script>
	import {
		shareMixins
	} from '@/common/share.js'
	import {
		INCOM_LIST,
		EXPEND_LIST
	} from "@/constant/index.js"
	import {
		editAccount,
		delAccount
	} from '@/api/index.js'
	export default {
		mixins: [shareMixins],
		data() {
			return {
				showCalendar: false,
				subsectionList: ['收入', '支出'],
				userInfo: this.$store.state.user.userInfo,
				accountData: {}, // 修改账单
				date: '',
				time: '',
				incomeList: INCOM_LIST, //收入列表
				expendList: EXPEND_LIST, //支出列表
			}
		},
		onLoad(options) {
			if (options) {
				this.accountData = JSON.parse(decodeURIComponent(options.accountDetails))
				this.accountData.eventTime = options.date
			}
		},
		onShow() {
			const date = new Date()
			this.date = `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日`
			this.time = `${date.getHours()}: ${date.getMinutes()}`

			uni.$on('returnIcon', data => {
				console.log('item', data.item);
				this.accountData.eventType = data.item.text
				this.accountData.inOut = data.type
				this.getImg()
			})
		},
		destroyed() {
			uni.$off('returnIcon')
		},
		methods: {
			amountInput(value) {
				// console.log('amountInput', value);
				if (value) {
					if (!Number.isInteger(Number(value))) {
						this.accountData.amount = parseFloat(value).toFixed(2)
					}
				}
			},
			getImg() {
				if (this.accountData.inOut === 1) { // 支出
					for (let iten of this.expendList) {
						if (iten.text === this.accountData.eventType) {
							return iten.activeIcon
						}
					}
				} else { // 收入
					for (let iten of this.incomeList) {
						if (iten.text === this.accountData.eventType) {
							return iten.activeIcon
						}
					}
				}
			},
			goToCategory() {
				uni.navigateTo({
					url: `/pages/my/categories?text=${this.accountData.eventType}&type=${this.accountData.inOut}`
				})
			},
			beforeBack() {
				uni.navigateBack()
			},
			changeCalendar(e) {
				console.log('e', e);
				this.accountData.eventTime = e.date
				// this.accountData.eventTime = `${e.year}-${e.month}-${e.day}`
			},
			// 提交修改订单
			handleEdit() {
				uni.showModal({
					title: '提示',
					content: '确定修改账单吗？',
					success: res => {
						if (res.confirm) {
							const data = {
								uid: this.userInfo.uid,
								bill: this.accountData
							}
							editAccount(this.accountData.id, data).then((res) => {
								if (res.head.code === '0000') {
									uni.showToast({
										title: '修改成功',
										icon: "none"
									})
									setTimeout(() => {
										uni.$emit('returnForm', this.accountData)
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.head.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				});
			},
			// 删除
			handleDelete() {
				uni.showModal({
					title: '提示',
					content: '确认删除账单吗？',
					success: res => {
						if (res.confirm) {
							delAccount(this.accountData.id, this.userInfo.uid).then(res => {
								console.log('delAccount res', res);
								if (res.head.code === '0000') {
									uni.showToast({
										title: '删除成功',
										icon: 'success'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.head.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		height: 100%;
		padding-top: 200rpx;
		background-color: #f1f3f6;

		.account-item-left {
			.account-icon {
				width: 67rpx;
				height: 67rpx;
				border-radius: 50%;
				margin-right: 16rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.account-title {
				font-weight: 600;
				font-size: 32rpx;
				color: #2F374E;
			}

			.account-input {
				width: 240rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #EFEFEF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}

			.account-text {
				width: 240rpx;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				padding: 4rpx;
				background: #EFEFEF;
				border-radius: 30rpx 30rpx 30rpx 30rpx;

				.in-out {
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					color: #2F374E;

					&.active {
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						background-color: #fff;
					}
				}
			}
		}

		.account-date {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #919AAB;
		}
	}

	::v-deep .tn-subsection {
		width: 240rpx !important;
	}
</style>